<template>
  <a-select v-model:value="locale">
    <a-select-option value="zh">中文</a-select-option>
    <a-select-option value="en">English</a-select-option>
  </a-select>
  <a-tabs v-model:activeKey="activeKey" @change="changePanel">
    <a-tab-pane v-for="item in tabList" :key="item.id" :tab="$t(item.name) as any" />
  </a-tabs>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts">
const {locale} = useI18n()
const route = useRoute()
const router = useRouter()
const activeKey = ref<number>(1)

const tabList = [
  {
    id: 1,
    name: 'home',
    path: '/',
  },
  {
    id: 2,
    name: 'list',
    path: '/list',
  },
  {
    id: 3,
    name: 'table',
    path: '/table'
  }
]

function changePanel(val: number) {
  activeKey.value = val
  router.push(tabList.find(item => item.id === activeKey.value)!.path)
}

activeKey.value = tabList.find(item => item.path === route.fullPath)!.id
</script>

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.2s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
}
</style>
